<template>
	<uni-popup
		class="popup"
		ref="popup"
		type="bottom"
		mask-background-color="rgba(19, 19, 19, 0.6)"
		:safe-area="false"
		:mask-click="false"
		:is-mask-click="false"
	>
		<view class="sleep_report_wrap" :style="style">
			<view class="sleep_report" v-if="showReport">
				<view class="head">
					<view class="time">
						{{ today }}
					</view>
					<uni-icons type="clear" size="30" color="#FFFFFF" @click="closeDialog"></uni-icons>
				</view>

				<view class="report_title">当日健康报告</view>

				<view class="points">
					<view class="score">{{ score }}</view>
					<view class="key">健康得分</view>
				</view>

				<view class="location"
					>你的健康得分超过 <text class="per"> {{ locationPer }}%</text>用户</view
				>

				<view class="sleep_total">
					<view class="total_num">
						<view class="label">
							<image src="@/static/ring/report/inBed.png" mode="widthFix"></image>
							<view>在床总时长</view>
						</view>
						<view class="duration">{{ minutes2Duration(inBed) }}</view>
					</view>
					<view class="total_num">
						<view class="label">
							<image src="@/static/ring/report/inSleep.png" mode="widthFix"></image>
							<view>睡眠时长</view>
						</view>
						<view class="duration">{{ minutes2Duration(inSleep) }}</view>
					</view>
				</view>

				<view class="efficiency">
					<text class="label">睡眠效率</text>
					<text class="value">{{ efficiency }}%</text>
				</view>

				<view class="detail">
					<view class="wakeup progress">
						<view class="up">
							<view class="title">
								<view class="dot"></view>
								清醒时长
							</view>
							<text class="value">{{ detail.awakePer }}%</text>
							<text class="duration">{{ detail.awakeDuration }}</text>
						</view>
						<view class="down">
							<view class="line" :style="{ width: detail.awakePer + '%' }"></view>
						</view>
					</view>
					<view class="rem progress">
						<view class="up">
							<view class="title">
								<view class="dot"></view>
								快速眼动时长
							</view>
							<text class="value">{{ detail.remPer }}%</text>
							<text class="duration">{{ detail.remDuration }}</text>
						</view>
						<view class="down">
							<view class="line" :style="{ width: detail.remPer + '%' }"></view>
						</view>
					</view>
					<view class="light progress">
						<view class="up">
							<view class="title">
								<view class="dot"></view>
								浅睡时长
							</view>
							<text class="value">{{ detail.lightPer }}%</text>
							<text class="duration">{{ detail.lightDuration }}</text>
						</view>
						<view class="down">
							<view class="line" :style="{ width: detail.lightPer + '%' }"></view>
						</view>
					</view>
					<view class="deep progress">
						<view class="up">
							<view class="title">
								<view class="dot"></view>
								深睡时长
							</view>
							<text class="value">{{ detail.deepPer }}%</text>
							<text class="duration">{{ detail.deepDuration }}</text>
						</view>
						<view class="down">
							<view class="line" :style="{ width: detail.deepPer + '%' }"></view>
						</view>
					</view>
				</view>

				<view class="button" @click="receive">领取积分奖励</view>
			</view>

			<view class="sleep_point" v-if="showPoint">
				<view class="point_title">恭喜获得</view>

				<view class="points">
					<view class="score">{{ points }}</view>
					<view class="key">积分</view>
				</view>

				<view class="button" @click="gotIt">确认</view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
import dayjs from "dayjs";
import { receiveAward } from "@/api/ring/report.js";

export default {
	props: {
		value: Boolean,
		data: Object,
	},

	data() {
		return {
			popup: null,
			showReport: true,
			showPoint: false,

			sleepReportData: {},

			totalCoin: 0,
		};
	},

	computed: {
		style() {
			const width = uni.getSystemInfoSync().windowWidth;
			const scale = Math.min(width * 0.925 / 390, 1);
			return {
				transform: `scale(${scale})`,
			};
		},

		today() {
			return dayjs().format("YYYY-MM-DD");
		},
		score() {
			return this.sleepReportData.score;
		},

		locationPer() {
			return this.sleepReportData?.rank * 100;
		},

		inBed() {
			return this.sleepReportData?.totalMinute;
		},

		inSleep() {
			return this.sleepReportData?.asleepMinute;
		},

		efficiency() {
			return Math.round(this.sleepReportData?.asleepRate * 100);
		},

		detail() {
			const { deepSleepMinute, deepSleepRate, lightSleepMinute, lightSleepRate, remMinute, remRate, wakeUpMinute, wakeUpRate } = this.sleepReportData;
			return {
				deepDuration: this.minutes2Duration(deepSleepMinute),
				deepPer: Math.round(deepSleepRate * 100),
				lightDuration: this.minutes2Duration(lightSleepMinute),
				lightPer: Math.round(lightSleepRate * 100),
				remDuration: this.minutes2Duration(remMinute),
				remPer: Math.round(remRate * 100),
				awakeDuration: this.minutes2Duration(wakeUpMinute),
				awakePer: Math.round(wakeUpRate * 100),
			};
		},

		points() {
			return this.totalCoin;
		},
	},

	watch: {
		value(val) {
			if (this.popup) {
				if (val) {
					this.popup.open();
				} else {
					this.popup.close();
				}
			}
		},

		data() {
			if (this.data) {
				this.sleepReportData = this.data;
			}
		},
	},

	mounted() {
		this.$nextTick(() => {
			this.popup = this.$refs.popup;
		});
	},

	methods: {
		receive() {
			receiveAward({ dateStr: dayjs().format("YYYY-MM-DD") })
				.then((res) => {
					console.log("receiveAward res", res);
					if (res?.data?.totalCoin > 0) {
						this.totalCoin = res.data.totalCoin;
						this.showPoint = true;
						this.showReport = false;
					} else {
						this.closeDialog();
					}
				})
				.catch((error) => {
					console.log("receiveAward error", error);
				});
		},

		gotIt() {
			this.closeDialog();
		},

		closeDialog() {
			this.$emit("input", false);

			this.$nextTick(() => {
				this.showReport = false;
				this.showPoint = false;
				this.sleepReportData = {};
				this.totalCoin = 0;
			});
		},

		minutes2Duration(m) {
			const hours = parseInt(m / 60);
			const minutes = parseInt(m % 60);
			let duration = "";
			if (hours) {
				duration += hours + " 小时 ";
			}
			if (minutes) {
				duration += minutes + " 分钟";
			}
			return duration || "0 分钟";
		},
	},
};
</script>
<style lang="scss" scoped>
.sleep_report_wrap {
	width: 100vw;
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;

	.sleep_report {
		align-self: center;
		// width: calc(350 * 100% / 390);
		// height: calc(616 * 100% / 844);
		// width: 90%;
		// height: 80%;
		// max-width: 700rpx;
		// max-height: 1232rpx;
		width: 700rpx;
		height: 1232rpx;
		background: url("@/static/bg/sleepReportBg.png") no-repeat center;
		background-size: cover;
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
		}

		border-radius: 40rpx;

		.head {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.time {
				width: 264rpx;
				height: 100%;
				border-radius: 40rpx 0px 40rpx 0px;
				color: #2c61fe;
				background-color: #9bc7fe;
				box-shadow: 0px 0px 42rpx 0px #ffffffcc inset;

				line-height: 80rpx;
				text-align: center;
				font-size: 40rx;
				font-weight: 500;
			}

			.uni-icons {
				margin-right: 30rpx;
			}
		}

		.report_title {
			width: 100%;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 50rpx;
			text-align: center;

			margin-top: 40rpx;
		}

		.points {
			margin: 0 auto;
			margin-top: 40rpx;

			width: 264rpx;
			height: 264rpx;
			background-color: rgba(255, 255, 255, 0.01);
			box-shadow: 0px 0px 12px 0px rgba(44, 97, 254, 1) inset, 0px 6px 10px 0px rgba(52, 89, 199, 0.5);

			border-radius: 50%;
			// border: 2rpx solid rgba(44, 97, 254, 1);

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.score {
                width: 100%;
				font-size: 86rpx;
				font-weight: 500;
				line-height: 120rpx;
				text-align: center;

				background: linear-gradient(180deg, rgba(100, 205, 253, 1) 0%, rgba(44, 97, 254, 1) 100%);
				/* 渐变颜色 */
				-webkit-background-clip: text;
				/* 仅对文本应用背景 */
				-webkit-text-fill-color: transparent;
				/* 使文本填充颜色透明 */
			}

			.key {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: rgba(44, 97, 254, 1);
			}
		}

		.location {
			margin-top: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			text-align: center;
			color: #000000;

			.per {
				font-size: 36rpx;
				font-weight: 600;
				line-height: 50rpx;
				text-align: center;
				margin: 0 10rpx;
			}
		}

		.sleep_total {
			width: 100%;
			margin-top: 50rpx;

			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.total_num {
				.label,
				.duration {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					text-align: center;
					color: #2c61fe;
				}

				.label {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 56rpx;
						margin-right: 12rpx;
					}
				}

				.duration {
					margin-top: 15rpx;
					color: #000000;
				}
			}
		}

		.efficiency {
			// width: calc(100% - 120rpx);
			padding: 0 60rpx;
            padding-top: 20rpx;
			// margin-top: 25rpx;

			display: flex;
			/* 使背景渐变生效 */
			justify-content: space-between;
			align-items: center;

			font-size: 100rpx;
			/* 字体大小 */
			font-weight: bold;
			/* 字体加粗 */
			background: linear-gradient(180deg, #ffffff 0%, #ffb89c 100%);
			/* 渐变颜色 */
			-webkit-background-clip: text;
			/* 仅对文本应用背景 */
			-webkit-text-fill-color: transparent;
			/* 使文本填充颜色透明 */

			.label {
				font-size: 32rpx;
				font-weight: 600;
				line-height: 44rpx;
				text-align: left;
			}

			.value {
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				text-align: right;
			}
		}

		.detail {
			width: 100%;
			padding: 0 60rpx;

			margin-top: 20rpx;

			.progress {
				// width: calc(100% - 120rpx);

				& + .progress {
					margin-top: 30rpx;
				}

				&.wakeup {
					.dot,
					.line {
						background-color: rgba(255, 217, 121, 1);
					}

					.duration {
						color: rgba(255, 217, 121, 1);
					}
				}

				&.rem {
					.dot,
					.line {
						background-color: rgba(0, 229, 255, 1);
					}

					.duration {
						color: rgba(0, 229, 255, 1);
					}
				}

				&.light {
					.dot,
					.line {
						background-color: rgba(121, 255, 223, 1);
					}

					.duration {
						color: rgba(121, 255, 223, 1);
					}
				}

				&.deep {
					.dot,
					.line {
						background-color: rgba(27, 86, 238, 1);
					}

					.duration {
						color: rgba(27, 86, 238, 1);
					}
				}

				.up {
					width: 100%;

					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					text-align: left;

					display: flex;
					justify-content: flex-start;
					align-items: center;

					.title {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: white;
						width: auto;

						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						text-align: left;

						.dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}
					}

					.value {
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						text-align: left;
						color: white;
						margin-left: 20rpx;
					}

					.duration {
						margin-left: auto;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 40rpx;
						text-align: right;
					}
				}

				.down {
					width: 100%;
					height: 12rpx;
					background-color: rgba(68, 68, 68, 0.4);
					border-radius: 64rpx;
					margin-top: 10rpx;

					.line {
						width: 0px;
						height: 100%;
						border-radius: 64rpx;
					}
				}
			}
		}

		.button {
			position: absolute;
			left: 50%;
			bottom: -42rpx;
			transform: translateX(-50%);

			width: 400rpx;
			height: 84rpx;
			border-radius: 100rpx;

			background: linear-gradient(180deg, #64cdfd 0%, #2c61fe 100%);

			font-size: 36rpx;
			font-weight: 600;
			line-height: 84rpx;
			text-align: center;
			color: white;
		}
	}

	.sleep_point {
		align-self: center;
		width: 670rpx;
		height: 700rpx;
		background: url("@/static/bg/sleepPointBg.png") no-repeat center;
		background-size: contain;

		// border-radius: 80rpx;

		position: relative;

		// background-color: white;

		.point_title {
			width: 100%;
			font-size: 48rpx;
			font-weight: 500;
			line-height: 66rpx;
			text-align: center;
			margin-top: 80rpx;
		}

		.points {
			margin: 0 auto;
			margin-top: 44rpx;

			width: 340rpx;
			height: 340rpx;
			background-color: rgba(255, 255, 255, 0.01);
			box-shadow: 0px 0px 12px 0px rgba(44, 97, 254, 1) inset, 0px 6px 10px 0px rgba(52, 89, 199, 0.5);

			border-radius: 50%;
			// border: 2rpx solid rgba(44, 97, 254, 1);

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.score {
                width: 100%;
				font-size: 96rpx;
				font-weight: 500;
				line-height: 120rpx;
				text-align: center;

				background: linear-gradient(180deg, rgba(100, 205, 253, 1) 0%, rgba(44, 97, 254, 1) 100%);
				/* 渐变颜色 */
				-webkit-background-clip: text;
				/* 仅对文本应用背景 */
				-webkit-text-fill-color: transparent;
				/* 使文本填充颜色透明 */
			}

			.key {
				font-size: 36rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: rgba(44, 97, 254, 1);
			}
		}

		.button {
			position: absolute;
			left: 50%;
			bottom: -42rpx;
			transform: translateX(-50%);

			width: 400rpx;
			height: 84rpx;
			border-radius: 100rpx;

			background: linear-gradient(180deg, #64cdfd 0%, #2c61fe 100%);

			font-size: 36rpx;
			font-weight: 600;
			line-height: 84rpx;
			text-align: center;
			color: white;
		}
	}
}
</style>
